<template>
  <div class="bigbox">
    <div class="search">
      <span class="icon bi bi-search"></span>
      <input type="text" placeholder="点击搜索商品" v-model="inputV" @keydown.enter = "toSearch" />
      <div class="button" @click="toSearch">搜索</div>
    </div>
    <div class="history box">
      <div class="title">
        <div>历史记录</div>
        <div @click="clearHistory">清空记录</div>
      </div>
      <ul class="list" v-if="search.historyList.length>0">
        <li class="list_item" v-for="(item,index) in search.historyList" v-bind:key = 'index' @click="getResult(item)">{{item}}</li>
      </ul>
      <ul class="list" v-if="search.historyList.length==0">
        <li class="list-none"> 暂无历史记录</li>
      </ul>
    </div>
    <div class="hot box">
      <div class="title">热门搜索</div>
      <ul class="list" v-if="search.hotList.length>0 && isW">
        <li class="list_item" v-for="(item,index) in search.hotList" v-bind:key = 'index' @click="getResult(item)">{{item}}</li>
      </ul>
      <ul v-if="!isW" class="isW">
          加载中
      </ul>
    </div>
    <section class="tt-list" v-for="item in search.resultList" v-bind:key = 'item.id'>
    <div class="tt-list-item" v-if="iswait">
      <router-link :to="{path : '/home/detail',query:{id : item.id}}">
        <div class="image-box"><img :src="item.image" alt="" v-on:error.once="dosomething($event)" /></div>
        <div class="content-box">
          <div class="title_box">
            {{item.store_name}}
          </div>
          <div class="new_price">
            <span>￥{{ item.price }}</span>
          </div>
          <div class="vip_price">
            <span>￥{{ item.vip_price }}</span>
            <img
              src=""
              alt=""
            />
            <span class="count">已售出{{ item.sales }}{{ item.unit_name }}</span>
          </div>
        </div>
        <div class="cart-box">
          <i class="bi bi-cart3"></i>
        </div>
      </router-link>
    </div>
  </section>
  <nodata v-if="search.resultList.length == 0 && iswait">
        暂无数据~
  </nodata>
  <div v-if="!iswait" class="wait">加载中</div>
  <!-- {{search.hotList}} -->
  <!-- {{search.historyList}} -->
  <!-- {{search.resultList}} -->
  </div>
</template>

<script>
// 获取热门关键字接口
// http://47.115.51.185/api/search/keyword
// 搜索接口
// http://47.115.51.185/api/products?page=1&limit=20&keyword=衣服
import { get } from "@/utils/http";
import { mapState } from "vuex";
import nodata from '@/components/nodata';
import wait from '@/components/wait';
import $ from 'jquery'
export default {
  data(){
    return{
      inputV : '',
      isW : false,
      iswait : true,
    }
  },
  methods: {
    init() {
      get("/api/search/keyword").then((response) => {
        let res = response.data;
        if (res.status == 200) {
          let data = res.data;
          this.$store.dispatch("search/sethotAsync", data);
          // console.log(data);
          this.isW = true;
        }
      });
    },
    dosomething: function (e) {
        e.currentTarget.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F37%2F92%2F40573c69065b76e.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647747238&t=e2ac665f666780d32ec1e60b4ceb233f"
      },
    searchKeyWord(keyName){
        this.iswait = false;
        get(`/api/products?page=1&limit=20&keyword=${keyName}`).then((response) => {
        let res = response.data;
        if (res.status == 200) {
          // let data = res.data;
          this.$store.dispatch("search/setresultAsync", res.data);
          // console.log(res.data);
          this.iswait = true;
        }
      });
    },
    toSearch(){
      // console.log(this.inputV);
      this.getWord(this.inputV);
      this.getHistory();
      if(this.inputV == '') {
        return
      }
      this.searchKeyWord(this.inputV);
      this.inputV = '';
    },
    getWord(input){
      let str = input;
      if(str == ''){
        alert('输入内容不能为空!');
        return;
      }
      let hisStr = localStorage.getItem('hisSearch');
      if(hisStr == null){
        hisStr = str;
      }else{
        hisStr += ','+str;
      }
      localStorage.setItem('hisSearch',hisStr);
    },
    getResult(word){
      this.getWord(word);
      this.getHistory();
      this.searchKeyWord(word);
    },
    getHistory(){
      let hisStr = localStorage.getItem('hisSearch');
      let arr = []
      if(hisStr != null){
        arr = hisStr.split(',');
        arr.reverse();  
        arr = [...new Set(arr)]
      }
      // console.log(arr)
      // console.log(this.$store.state.search.historyList);
      this.$store.dispatch("search/sethistoryAsync", arr);
    },
    clearHistory(){
      localStorage.removeItem('hisSearch');
      this.getHistory()
    },
  },
  computed:{
     ...mapState(['search'])
  },
  created() {
    this.init();
    this.getHistory();
  },
  components:{
    nodata,
    wait,
  },
};
</script>

<style lang="less" scoped>
@import "../assets/font/bootstrap-icons.css";
@import "../assets/less/variable.less"; 
.bigbox {
    padding-top: 50px;
  .search {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    height: 50px;
    padding: 10px 0px 10px 20px;
    box-sizing: border-box;
    display: flex;
    input {
      display: block;
      height: 100%;
      flex-basis: 80%;
      outline: none;
      border: 0;
      background-color: #eee;
      border-radius: 15px;
      padding-left: 35px;
    }
    .icon {
      position: absolute;
      font-size: 16px;
      top: 50%;
      transform: translateY(-50%);
      left: 30px;
    }
    .button {
      flex-basis: 20%;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
    }
  }
  .box{
      font-size: 16px;
      padding: 20px;
      .title{
          color: #bbb;
          display: flex;
          justify-content: space-between;
      }
      .list{
          border-bottom: 1px solid #eee;
          padding: 10px 0 20px;
          &::after{
              content: "";
              display: block;
              clear: both;
          }
          .list_item{
              float: left;
              padding: 5px 10px;
              border:1px solid #ccc;
              margin-right: 10px;
              font-size: 14px;
              margin-bottom: 15px;
          }
          .list-none{
            color: #bbb;
            text-align: center;
          }
      }
      .isW{
        text-align: center;
        color: #bbb;
        padding: 10px 0 20px;
        border-bottom: 1px solid #eee;
      }
  }
  .tt-list {
  background-color: #fff;
  padding: @padding2;
  padding-top: 0;
  .tt-list-item {
    padding-top: 0px;
    padding-bottom: 0px;
    a {
      display: block;
      width: 100%;
      position: relative;
      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }
  }
  .image-box {
    float: left;
    width: 90px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    overflow: hidden;
    img {
      width: 90px;
      vertical-align: middle;
    }
  }
  .content-box {
    float: left;
    font-size: 16px;
    width: calc(100% - 90px);
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    .title_box {
      padding-left: @padding1;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .new_price {
      padding-left:  @padding1;
      box-sizing: border-box;
      margin-top: 10px;
      font-size: 16px;
      color: @color3;
      font-weight: bold;
    }
    .vip_price {
      padding-left:  @padding1;
      box-sizing: border-box;
      margin-top: 5px;
      font-size: 13px;
      span {
        vertical-align: middle;
      }
      img {
        width: 28px;
        margin: 0 10px 0 5px;
        vertical-align: middle;
      }
      .count {
        color: #666;
      }
    }
  }
  .cart-box {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    color: @color3;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border: 1px solid @color3;
    border-radius: 50%;
  }
}
  .wait{
    padding: 30px 0;
    text-align: center;
    // background: #f5f5f5;
    color: #ccc;
  }
}
</style>